<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="a"></div>
    <script>
      //  1.
      //查找满足条件元素，找到返回这个元素，找不到返回undefined
      // const re = [3, 6, 7, 9, 2, 5].find( function (item, index, o) {

      // 	// console.log('a')
      // 	return item > 3;
      // } );



      // const re = [3, 6, 7, 9, 2, 5].find( item => item > 3 );
      // console.log( re );

      // 2 .
      //查找满足条件的元素，找到返回这个元素的索引值，找不到返回-1
      // const re = [3, 6, 7, 9, 2, 5].findIndex( function ( item, index, o ) {
      // 	return item > 30;
      // } );
      // const re = [3, 6, 7, 9, 2, 5].findIndex( item => item > 3 );

      // console.log(re);

      // 3.
      // 查找满足条件的元素，如果每一个都满足返回true，否则返回false
      // const re = [6, 4, 7, 9, 8, 5].every( function (item, index, o) {
      // 	// console.log('a');

      // 	return item > 4

      // } );
      // 4 join 方法
      const spec = { size: '40cm*40cm', color: '黑色' }

      // console.log( Object.values( spec ) );// ['40cm*40cm', '黑色']
      // console.log( Object.values( spec ).join('/') );

      document.querySelector('div').innerHTML = Object.values(spec).join('/')

      //  let arr = ['red', 'green', 'blue']
      // console.log(arr.pop()) // blue
      // 5.pop() 删除最后一个元素
      // arr.pop()
      // arr.pop()
      // console.log(arr)
      // 6. shift() 删除第一个元素
      // arr.shift()
      // console.log(arr)
      // 7. splice 删除指定元素  splice(起始位置-索引号, 删除几个)
      arr.splice(2, 1) // 是从索引号1的位置开始删， 只删除1个
      // arr.splice(2) // 从blue 删除到最后
      console.log(arr)

      // let arr = ['pink', 'hotpink']
      //  8新增  push 推末尾,可以追加多个
      //   console.log(arr.push('deeppink'))
      //   arr.push('deeppinnk', 'linghtpink')
      //  console.log(arr)
      // 9 开头追加，也可以追加多个
      //  arr.unshift('red')
      // console.log(arr)
      let arr = ['1', '2', '3']
      let res = arr.push('4', '5', '6')
      // 打出数组长度
      document.write(res)
      // document.write(arr)
      // let arr1 = ['7','8','9']
      // arr1.unshift('1')
      // document.write(arr1)
      // 10 forEach 遍历数组 不返回，用于不改变值，经常用于查找打印输出值
      arr.forEach(function (item, index, o) {
        // 第一个参数：代表当前项
        // 第二个参数：代表当前项的索引值
        // 第三个参数：代表数组本身
        console.log(item, index, o)
        // return 1;
      })
      // console.log(a1);
      // map遍历数组每一项，让每项执行一边回调函数，把结果放到新数组返回
      const re = arr.map(function (item, index, o) {
        // console.log(item, index, o)
        return item * item // [1, 4, 9, 16]
      })

      console.log(re)
      // 11  filter 过滤数组 筛选数组元素，并生成新数组
      // 遍历数组筛选满足条件的元素，最后返回一个满足条件的新数组
      const re = [3, 6, 9, 7, 2, 5, 8].filter(function (item, index, o) {
        // console.log( item, index, o );
        return item % 2 === 0
      })
      console.log(re)
      //12 map 迭代数组 返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据
      // 13reduce 累计器 返回函数累计处理的结果，经常用于求和，累计等等
      // const re = arr.reduce( (prev, item) => prev + item, 0 )
      // 14 concat合并数组，生成新数组
      // 15sort数组排序
    </script>
  </body>
</html>
